<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/My'})" class="return"></a>
      {{$t('MyReward.v1')}}
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="text-align: center;">
					<van-tabs type="card" @change="getTab">
						<van-tab :title="$t('MyReward.v2')">
							<div align="center" style="color: #858dac;padding-bottom: 10px;margin-top: 10px;">
								<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' ' :loosing-text="$t('MyReward.v14')" :loading-text="$t('MyReward.v13')">
									<van-list v-model="loading" :finished="finished" :finished-text="$t('MyReward.v3')" :loading-text="$t('MyReward.v13')" @load="onLoad">
										<div align="center" class="border" v-for="(item,index) in list" :key="item.index">
											<div style="font-size: 13px;text-align: left;padding-left: 20px;border-bottom: 1px solid rgb(33, 38, 57);padding-bottom: 10px;">{{ item.createTime | dateFormat }}</div>
											<van-row style="font-size: 13px;padding: 0px 20px;margin-top: 10px;">
												<van-col span="8" style="text-align: left;">{{$t('MyReward.v4')}}</van-col>
												<van-col span="8" style="text-align: center;">{{$t('MyReward.v5')}}</van-col>
												<van-col span="8" style="text-align: right;">{{$t('MyReward.v6')}}</van-col>
											</van-row>
											<van-row style="font-size: 12px;color: white;padding-bottom: 10px;padding: 5px 20px;">
												<van-col span="8" style="text-align: left;" v-text="parseFloat(item.baseNum).toFixed(5).slice(0,-1)">999</van-col>
												<van-col span="8" style="text-align: center;" v-text="'V' + item.levelId"></van-col>
												<van-col span="8" style="text-align: right;" v-text="parseFloat(item.rewardNum).toFixed(5).slice(0,-1)">100</van-col>
											</van-row>
										</div>
									</van-list>
								</van-pull-refresh>
							</div>
						</van-tab>
						<van-tab :title="$t('MyReward.v10')">
							<div align="center" style="color: #858dac;padding-bottom: 10px;margin-top: 10px;">
								<van-pull-refresh v-model="isLoading2" @refresh="onRefresh2" pulling-text=' ' :loosing-text="$t('MyReward.v14')" :loading-text="$t('MyReward.v13')">
									<van-list v-model="loading2" :finished="finished2" :finished-text="$t('MyReward.v3')" :loading-text="$t('MyReward.v13')" @load="onLoad2">
										<div align="center" class="border" v-for="(item,index) in list2" :key="item.index">
											<div style="font-size: 13px;text-align: left;padding-left: 20px;border-bottom: 1px solid rgb(33, 38, 57);padding-bottom: 10px;">{{ item.createTime | dateFormat }}</div>
											<van-row style="font-size: 13px;padding: 0px 20px;margin-top: 10px;">
												<van-col span="8" style="text-align: left;">{{$t('MyReward.v7')}}</van-col>
												<van-col span="8" style="text-align: center;">{{$t('MyReward.v8')}}</van-col>
												<van-col span="8" style="text-align: right;">{{$t('MyReward.v6')}}</van-col>
											</van-row>
											<van-row style="font-size: 12px;color: white;padding-bottom: 10px;padding: 5px 20px;">
												<van-col span="8" style="text-align: left;" v-text="parseFloat(item.num).toFixed(5).slice(0,-1)">999</van-col>
												<van-col span="8" style="text-align: center;" v-text="item.ratio * 100 + '%'">20%</van-col>
												<van-col span="8" style="text-align: right;" v-text="parseFloat(item.reward).toFixed(5).slice(0,-1)">100</van-col>
											</van-row>
										</div>
									</van-list>
								</van-pull-refresh>
							</div>
						</van-tab>
						<van-tab :title="$t('MyReward.v11')">
							<div align="center" style="color: #858dac;padding-bottom: 10px;margin-top: 10px;">
								<van-pull-refresh v-model="isLoading3" @refresh="onRefresh3" pulling-text=' ' :loosing-text="$t('MyReward.v14')" :loading-text="$t('MyReward.v13')">
									<van-list v-model="loading3" :finished="finished3" :finished-text="$t('MyReward.v3')" :loading-text="$t('MyReward.v13')" @load="onLoad3">
										<div align="center" class="border" v-for="(item,index) in list3" :key="item.index">
											<div style="font-size: 13px;text-align: left;padding-left: 20px;border-bottom: 1px solid rgb(33, 38, 57);padding-bottom: 10px;">{{ item.createTime | dateFormat }}</div>
											<van-row style="font-size: 13px;padding: 0px 20px;margin-top: 10px;">
												<van-col span="8" style="text-align: left;">{{$t('MyReward.v9')}}</van-col>
												<van-col span="8" style="text-align: center;">{{$t('MyReward.v8')}}</van-col>
												<van-col span="8" style="text-align: right;">{{$t('MyReward.v6')}}</van-col>
											</van-row>
											<van-row style="font-size: 12px;color: white;padding-bottom: 10px;padding: 5px 20px;">
												<van-col span="8" style="text-align: left;" v-text="parseFloat(item.num).toFixed(5).slice(0,-1)">999</van-col>
												<van-col span="8" style="text-align: center;" v-text="item.ratio * 100 + '%'">20%</van-col>
												<van-col span="8" style="text-align: right;" v-text="parseFloat(item.reward).toFixed(5).slice(0,-1)">100</van-col>
											</van-row>
										</div>
									</van-list>
								</van-pull-refresh>
							</div>
						</van-tab>
					</van-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mine } from './../utils/api';
	import { dateFormat } from 'vux';
	export default {
		data() {
			return {
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1,
				isLoading2: false,
				finished2: false,
				loading2: false,
				listLength2: 0,
				total2: 0,
				size2: 10,
				current2: 1,
				isLoading3: false,
				finished3: false,
				loading3: false,
				listLength3: 0,
				total3: 0,
				size3: 10,
				current3: 1,
				list: [],
				list2: [],
				list3: [],
			}
		},
		created() {

		},
		mounted() {
			this.getList2(); // 节点奖 [预加载]
			this.getList3(); // 全网奖 [预加载]
		},
		methods: {
			getTab(type) {
				if(type == 0) {
					this.getList();
				} else if(type == 1) {
					this.getList2();
				} else if(type == 2) {
					this.getList3();
				}
			},
			getList() {
				mine.getReward({
					"current": this.current,
					"size": this.size
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			getList2() {
				mine.getRewardDetail({
					"current": this.current2,
					"size": this.size2
				}).then(res => {
					this.list2 = res.data.records;
					this.listLength2 = res.data.records.length;
					this.total2 = res.data.total;
				})
			},
			getList3() {
				mine.getInviteInformation({
					"current": this.current3,
					"size": this.size3
				}).then(res => {
					this.list3 = res.data.records;
					this.listLength3 = res.data.records.length;
					this.total3 = res.data.total;
				})
			},
			onRefresh() {
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: this.$t('MyReward.v12')
					});
					this.isLoading = false;
				}, 500);
			},
			onRefresh2() {
				this.getList2();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: this.$t('MyReward.v12')
					});
					this.isLoading2 = false;
				}, 500);
			},
			onRefresh3() {
				this.getList3();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: this.$t('MyReward.v12')
					});
					this.isLoading3 = false;
				}, 500);
			},
			onLoad() {
				this.getList();
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
			onLoad2() {
				if(this.total2 > this.listLength2) {
					this.getList2();
				}
				// 异步更新数据
				setTimeout(() => {
					if(this.total2 > this.listLength2) {
						this.size2 += 10;
						this.loading2 = false;
					} else {
						// 加载状态结束
						this.finished2 = true;
						this.loading2 = false;
					}
				}, 500);
			},
			onLoad3() {
				if(this.total3 > this.listLength3) {
					this.getList3();
				}
				// 异步更新数据
				setTimeout(() => {
					if(this.total3 > this.listLength3) {
						this.size3 += 10;
						this.loading3 = false;
					} else {
						// 加载状态结束
						this.finished3 = true;
						this.loading3 = false;
					}
				}, 500);
			}
		},
		filters: {
			dateFormat
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-tabs__nav--card {
		margin: 0px 60px;
		border: 0;
	}

	/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
		color: white;
		background-color: rgb(77, 89, 126);
	}

	/deep/ .van-tabs__nav {
		background-color: rgb(33, 38, 57);
	}

	/deep/ .van-tabs__nav--card .van-tab {
		color: rgb(133, 141, 172);
		border-right: 0;
	}

	.border {
		padding-top: 10px;
		border-bottom: 10px solid rgb(40, 45, 65);
	}

	.border:first-child {
		border-top: 10px solid rgb(40, 45, 65);
	}
</style>
